<template>
	<view id="operation" @click="goto($event)">
		<view class="public" v-for="item in list" :data-url="item.url">
			<icon type="success" class="public_icon" :data-url="item.url" :style="{ 'backgroundColor':item.color }" />
			<span>{{item.text}}</span>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	let list = [{
			icon: '',
			text: '工单查询',
			url: "/pages/work-order-management/work-order-query/work-order-query",
			color: '#6633ff'
		},
		{
			icon: '',
			text: '巡检查询',
			url: '/pages/patrol-management/patrol-processing/patrol-processing',
			color: '#ff9900'
		},
		{
			icon: '',
			text: '维保查询',
			url: '/pages/maintenance-management/maintenance-progress/maintenance-progress',
			color: '#6699ff'
		},
		{
			icon: '',
			text: '工单统计',
			url: '/pages/work-order-management/work-order-statistics/work-order-statistics',
			color: '#17d1d3'
		},
		{
			icon: '',
			text: '巡检统计',
			url: '/pages/patrol-management/patrol-statistics/patrol-statistics',
			color: '#79d3fe'
		},
		{
			icon: '',
			text: '维保统计',
			url: '/pages/maintenance-management/maintenance-statistics/maintenance-statistics',
			color: '#ff2b3f'
		},
		{
			icon: '',
			text: '能源管理',
			url: '/pages/energy-management/home-page/home-page',
			color: '#cc33ff'
		},
		{
			icon: '',
			text: '未完待续',
			url: '/pages/patrol-management/under-development/under-development',
			color: '#66ffcc'
		}
	]
	let goto = (event) => {
		let url = event.target.dataset?.url
		if (!url) return
		uni.navigateTo({
			url: url,
			fail: () => {
				uni.switchTab({
					url: url
				})
			}
		})
	}
</script>

<style lang="scss">
	#operation {
		width: 100vw;
		height: calc(100vh - 94px);
		padding: 20rpx;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 30% 30% 30%;
		grid-template-rows: 15% 15% 15%;
		grid-gap: 3%;
		background-color: #fafafa;

		.public {
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			background-color: white;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.public_icon {
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
				background-color: cadetblue;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>